<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :isDetail="true" title="订单详情">
    <a-row justify="space-between" type="flex">
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="商户类型">
            {{ detailData.mchType === 1?'普通商户':detailData.mchType === 2?'特约商户':'未知' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="服务商号">
            {{ detailData.isvNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="商户名称">
            {{ detailData.mchName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="商户号">
            {{ detailData.mchNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="支付订单号">
            <a-tag color="purple">
              {{ detailData.orderNo }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="商户订单号">
            {{ detailData.outTradeNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="支付金额">
            <a-tag color="green">
              {{ detailData.amount/100 }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="手续费">
            <a-tag color="pink">{{ detailData.feeAmount/100 }}</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="商家费率">{{ (detailData.feeRate*100).toFixed(2) }}%</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="应用APPID">
            {{ detailData.appId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="订单状态">
            <a-tag
              :color="detailData.orderStatus === 0?'blue':detailData.orderStatus === 1?'orange':detailData.orderStatus === 2?'green':detailData.orderStatus === 6?'':'volcano'">
              {{ detailData.orderStatus === 0?'订单生成':detailData.orderStatus === 1?'支付中':detailData.orderStatus ===
              2?'支付成功':detailData.orderStatus === 3?'支付失败':detailData.orderStatus === 4?'已撤销':detailData.orderStatus ===
              5?'已退款':detailData.orderStatus === 6?'订单关闭':'未知' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="回调状态">
            <a-tag :color="detailData.notifyStatus === 1?'green':'volcano'">
              {{ detailData.notifyStatus === 0?'未发送':detailData.notifyStatus === 1?'已发送':'未知' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="订单失效时间">
            {{ detailData.expiredTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="支付成功时间">
            {{ detailData.successTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="创建时间">
            {{ detailData.createTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="更新时间">
            {{ detailData.updateTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="支付错误码">
            {{ detailData.errCode }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="18">
        <a-descriptions>
          <a-descriptions-item label="支付错误描述">
            {{ detailData.errMsg }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-divider/>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="渠道编码">
            {{ detailData.ifCode }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="货币代码">
            {{ detailData.currency }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="支付方式">
            {{ detailData.wayCode }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="客户端IP">
            {{ detailData.clientIp }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="用户标识">
            {{ detailData.channelUser }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="渠道订单号">
            {{ detailData.channelOrderNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="商品标题">
            {{ detailData.subject }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="商品描述">
            {{ detailData.body }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="退款状态">
            <a-tag
              :color="detailData.refundStatus === 0?'blue':detailData.refundStatus === 1?'orange':detailData.refundStatus === 2?'green':'volcano'">
              {{ detailData.refundStatus === 0?'未发起':detailData.refundStatus === 1?'部分退款':detailData.refundStatus ===
              2?'全额退款':'未知' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="退款次数">
            {{ detailData.refundTimes }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="退款总额">
            <a-tag color="cyan" v-if="detailData.refundAmount">
              {{ detailData.refundAmount/100 }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="异步通知地址">
            {{ detailData.notifyUrl }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="页面跳转地址">
            {{ detailData.returnUrl }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-divider/>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="订单分账模式">
            <span v-if="detailData.divisionMode == 0">该笔订单不允许分账</span>
            <span v-else-if="detailData.divisionMode == 1">支付成功按配置自动完成分账</span>
            <span v-else-if="detailData.divisionMode == 2">商户手动分账(解冻商户金额)</span>
            <span v-else>未知</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="分账状态">
            <a-tag color="blue" v-if="detailData.divisionStatus == 0">未发生分账</a-tag>
            <a-tag color="orange" v-else-if="detailData.divisionStatus == 1">待分账</a-tag>
            <a-tag color="red" v-else-if="detailData.divisionStatus == 2">分账处理中</a-tag>
            <a-tag color="green" v-else-if="detailData.divisionStatus == 3">任务已结束</a-tag>
            <a-tag color="#f50" v-else>未知</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
        <a-descriptions>
          <a-descriptions-item label="最新分账发起时间">{{ detailData.divisionLastTime }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="6">
      </a-col>
    </a-row>
    <a-divider/>
    <a-row justify="start" type="flex">
      <a-col :sm="24">
        <!--        <a-form-model-item label="扩展参数">-->
        <!--          <a-input-->
        <!--            type="textarea"-->
        <!--            disabled="disabled"-->
        <!--            style="height: 100px;color: black"-->
        <!--            v-model="detailData.extParam"-->
        <!--          />-->
        <!--        </a-form-model-item>-->
      </a-col>
    </a-row>
  </BasicDrawer>
</template>
<script lang="ts">
  import {defineComponent, ref} from 'vue';
  import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
  import {Descriptions, Row, Col, Divider, Tag} from 'ant-design-vue';
  import {getById} from './pay.api';

  export default defineComponent({
    name: 'OrderDetailDrawer',
    components: {
      BasicDrawer,
      ADescriptions: Descriptions,
      ADescriptionsItem: Descriptions.Item,
      ARow: Row,
      ACol: Col,
      ADivider: Divider,
      ATag: Tag,
    },
    setup() {
      const detailData = ref();
      const [registerDrawer, {setDrawerProps}] = useDrawerInner(async (data) => {
        setDrawerProps({confirmLoading: false});
        detailData.value = await getById(data.record.id);
      });

      return {registerDrawer, detailData};
    },
  });
</script>
